<template>
	<view>
		<u-form :model="formData" ref="uForm">
			<view class="form">
				<u-form-item :border-bottom="false">
					<u-input border height="80" v-model="formData.mobile" placeholder="请输入您的手机号" />
				</u-form-item>
				<u-form-item :border-bottom="false">
					<u-input border height="80" v-model="formData.code" placeholder="请输入您的验证码" />
				</u-form-item>
				<view class="code">
					<button style="z-index: 1;" class="primaryMiniBnt" @click="showSliderVerifyFn">{{ tips }}</button>
					<u-toast ref="uToast"></u-toast>
					<u-verification-code :seconds="seconds" ref="uCode" @change="codeChange"></u-verification-code>
				</view>
			</view>
		</u-form>
		<view class=" text-r text-main font" @click="hanglgforgotPasswordInFn">忘记密码</view>
		<view class=" mb-3 text-l">
			<u-checkbox v-model="checked" shape="circle" active-color="#0052d9">
				我已阅读
				<text class="text-primary " @click="hanglgUserManualFn">《用户手册》</text>
				及
				<text class="text-primary" @click="hanglgPrivacyPolicyFn">《隐私政策》</text>
			</u-checkbox>
		</view>
		<view class="mb-2"><button class="primaryBnt" @click="hanglgLoginFn">登 录</button></view>
		<verify
			@success="verifySuccessfullyFn"
			:mode="'pop'"
			:captchaType="'blockPuzzle'"
			:imgSize="{ width: '300px', height: '155px' }"
			ref="verify"
		></verify>
	</view>
</template>

<script>
import verify from '@/userPages/components/verify/verify.vue';
import { isValidPhoneNumber } from '@/utils/tool.js';
import { sendVerifyMobileSms, smsCodeLogin, getByUserId } from '@/api/apis.js';
import { encrypt } from '@/utils/encrypFile';
export default {
	components: {
		verify
	},
	data() {
		return {
			tips: '',
			seconds: 60,
			checked: false,
			formData: {
				mobile: '',
				code: ''
			}
		};
	},
	methods: {
		//显示图形验证码
		showSliderVerifyFn() {
			if (this.queryCodeValidRuleFn()) {
				this.$refs.verify.show();
			}
		},
		//验证成功
		verifySuccessfullyFn(e) {
			this.getCodeFn();
			this.$refs.verify.close();
		},

		//获取验证码
		getCodeFn() {
			if (this.$refs.uCode.canGetCode) {
				sendVerifyMobileSms({
					mobile: this.formData.mobile
				}).then(res => {
					uni.showLoading({
						title: '正在获取验证码',
						mask: true
					});
					if (res.code == 10000) {
						setTimeout(() => {
							uni.hideLoading();
							this.$u.toast('验证码已发送');
							this.$refs.uCode.start();
						}, 2000);
					} else {
						this.$u.toast(res.msg);
					}
				});
			} else {
				this.$u.toast('验证码已发送，请稍后再试');
			}
		},
		//修改验证码提示文字
		codeChange(text) {
			this.tips = text;
		},
		//登录
		hanglgLoginFn() {
			if (this.validRuleFn()) {
				smsCodeLogin({
					encryptAccountAndPasswordStr: encrypt(
						`${this.$u.trim(this.formData.mobile)}-${this.$u.trim(this.formData.code)}`
					)
				}).then(res => {
					if (res.code == 10000) {
						uni.setStorage({
							key: 'ims-token',
							data: res.data.token
						});
						this.getByUserFn(res.data.userId);
					} else {
						this.$u.toast(res.msg);
					}
				});
			}
		},
		//获取用户个人信息
		getByUserFn(userId) {
			getByUserId({
				userId: userId
			}).then(res => {
				if (res.code == 10000) {
					uni.setStorage({
						key: 'userInfo',
						data: res.data
					});
					this.$Router.replaceAll({
						path: '/pages/home/index'
					});
				} else {
					this.$u.toast(res.msg);
				}
			});
		},
		//验证码校验
		queryCodeValidRuleFn() {
			if (!isValidPhoneNumber(this.formData.mobile)) {
				this.$u.toast('请输入正确手机号码');
				return false;
			}
			return true;
		},
		//登录校验
		validRuleFn() {
			if (this.formData.code == '') {
				this.$u.toast('请输入验证码');
				return false;
			}
			if (!this.checked) {
				this.$u.toast('请阅读隐私政策');
				return false;
			}
			return true;
		},
		//用户手册
		hanglgUserManualFn() {
			console.log('点击了用户手册');
		},
		//隐私政策
		hanglgPrivacyPolicyFn() {
			console.log('点击了隐私政策');
		},
		//注册账号
		hanglgsignInFn() {
			this.$Router.push({
				path: '/userPages/pages/register/index'
			});
		},
		//
		//忘记密码
		hanglgforgotPasswordInFn() {
			this.$Router.push({
				path: '/userPages/pages/forgotPassword/index'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.form {
	position: relative;
	.code {
		position: absolute;
		bottom: 30rpx;
		right: 12rpx;
		::v-deep .u-size-medium {
			padding: 0 20rpx;
			height: 64rpx !important;
			line-height: 64rpx !important;
		}
	}
}
</style>
